<template>
  <div class="rate-wrap" v-if="type === 'mark'">
    <button
        :class="{selected: val == item}"
        :disabled="disabled"
        circle
        v-for="(item,index) in markList"
        :key="index"
        @click="handle(item, index)">{{ item }}
    </button>
  </div>
  <!-- <div class="rate-wrap" v-else-if="type === 'mark'">
      <el-tooltip
      class="item"
      effect="dark"
      :content="rateText[index]"
      placement="bottom"
      v-for="(item, index) in markList"
      :key="index">
          <el-button :disabled="disabled" :class="{selected: val == item}" circle @click="handle(item)">{{item}}</el-button>
      </el-tooltip>
  </div> -->
  <div class="rate-wrap" v-else-if="type === 'star'" @mouseleave="disabled ? null : hover=-1">
    <button
        class="btn-icon"
        :disabled="disabled"
        v-for="(item, index) in markList"
        :key="index"
        @click="handle(item, index)">
      <van-icon
          class="star-icon"
          :name="item <= hover || item <= val ? 'star' : 'star-o'"
          @mouseover="disabled ? null : hover=item"
          @mouseleave="disabled ? null : hover=-1"></van-icon>
    </button>
    <!-- <el-tooltip
    class="item"
    effect="dark"
    :content="rateText[index]"
    placement="bottom"
    v-for="(item, index) in markList"
    :key="index">
        <el-button class="btn-icon" :disabled="disabled" @click="handle(item)">
            <i
            :class="['star-icon font-30', item <= hover || item <= val ? 'el-icon-star-on' : 'el-icon-star-off']"
            @mouseover="hover=item"
            @mouseleave="hover=-1"></i>
        </el-button>
    </el-tooltip> -->
  </div>
</template>
<script>
import VanIcon from "@/components/vant/van-icon/van-icon.vue";

export default {
  components: {VanIcon},
  data() {
    return {
      hover: -1,
      val: this.mark
    }
  },
  props: {
    type: {
      type: String,
      default: 'mark',
    },
    mark: {
      type: [Number, String],
      default: -1
    },
    markList: {
      type: Array,
      default: () => [1, 2, 3, 4, 5]
    },
    rateText: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
  },
  methods: {
    handle(val, i) {
      let text = this.rateText.length && this.rateText[i] || ''
      this.val = val
      this.$emit('updata', val)
      if (text) {
        this.$toast.fail(text)
      }
    },
  },
  watch: {
    mark(n) {
      this.val = n
    }
  }
}
</script>
<style lang="scss" scoped>
.rate-wrap {
  width: 100%;
}

button {
  width: 44px;
  height: 44px;
  color: var(--color);
  background: #fff;
  border: 1px solid #ebedf0;
  display: inline-flex !important;

  &.selected {
    border-color: var(--color) !important;
    background: var(--color) !important;
    color: #fff !important;

    &[disabled]:not([type]) {
      color: #fff !important;
      background-color: var(--color);
    }

    &[disabled][type=default] {
      color: #fff !important;
      background-color: var(--color);
    }
  }

  & + button {
    margin-left: 10px;
  }
}

.star-icon {
  font-size: 30px;
  transition: .3s;
  color: #1EA69D;

  & + .star-icon {
    margin-left: 5px;
  }
}

.el-icon-star-off {
  color: #DDDDDD;
}

.el-icon-star-on {
  color: #25A3AF;
}

.btn-icon {
  border: none;
  padding: 0;

  &:hover {
    background: none;
  }

  &[disabled]:not([type]) {
    background-color: #fff;
  }

  &[disabled][type=default] {
    background-color: #fff;
  }
}
</style>